<template>
  <div class="management-list equipment-list">
    <div class="l">
      <h2 class="page-title">设备管理</h2>
      <search-box @search="onSearch" />
    </div>
    <!--  -->
    <div class="r" v-loading="loading">
      <div class="t">
        <batch-box />
        <ul class="status-list">
          <li v-for="d in $store.state.equipStatusList" :key="d.id">
            {{ d.name }}
            <span class="status-color" :style="{ background: d.color }"></span>
          </li>
        </ul>
      </div>
      <!-- 表格 -->
      <!-- :data要渲染的列表  prop每一个值 lable表格标题 -->
      <el-table :data="list" @selection-change="onSelect">
        <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="设备编号" prop="id"> </el-table-column>
          <el-table-column label="设备名称" prop="name"> </el-table-column>
          <el-table-column label="设备状态" prop="status" with="150">
            <template slot-scope="scope">
              {{ (equipStatusObj[scope.row.status] || {}).name }}
              <!-- {{scope.row.status}}
              {{equipStatusObj}} -->
              <span
              class="status-color"
              :style="{
                background: (equipStatusObj[scope.row.status] || {}).color,
              }"
            ></span>
            </template>
          </el-table-column>
          <el-table-column label="设备分类" prop="category">
          <template slot-scope="scope">
            {{ $store.getters.categoryObj[scope.row.category] }}
          </template>
        </el-table-column>
        <el-table-column label="设备数量" prop="number"> </el-table-column>
        <el-table-column label="设备单价" prop="price"> </el-table-column>
        <el-table-column label="购置时间" prop="time"> </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini">详情</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="setStatus(scope.row)"
              v-if="$store.state.role === 'admin' && scope.row.status !== 'STATUS6' ">设置状态</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="pageNo"
        :page-size.sync="pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total,sizes,prev,pager,next,jumper"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      >
      </el-pagination>
    </div>
    <!--  -->
    <status-box
      :show="show"
      :status="currentRow.view"
      :id="currentRow.id"
      @success="onSuccess"
      @close="show = false"
      />
  </div>
</template>
<script>
//  mapState和mapGetters都是生成计算属性
//  mapMutation和mapAction都是生成方法的
import { mapState,mapGetters } from 'vuex';
import listMixin from "@/assets/mixins/list.js";
import SearchBox from "@/components/SearchBox.vue";
import StatusBox from "@/components/StatusBox.vue";
import BatchBox from "@/components/BatchBox.vue";
export default {
  data(){
    return{
      status:'',
      id:'',
      show:false,//弹窗显示
      currentRow:{
        status:'',
        id:''
      }// 要设置状态的那条数据
    }
  },
  components: {
    SearchBox,
    BatchBox,
    StatusBox,
  },
  // mixin
  mixins: [listMixin],
  computed:{
    ...mapState(['equipStatusList']),
    ...mapGetters(['equipStatusObj'])
  },
  mounted(){
    setTimeout(()=>{
      console.log(this.list);
    },3000)
  },
  methods: {
    onSelect(event){
      console.log(event);
    },
    onSuccess(){
      this.show = false
      this.getList();
    },
    getList() {
      this.loading = true;
      //页码和每页的条数
      const { pageNo, pageSize } = this;
      this.axios
        .post("/equip-list", {
          pageNo,
          pageSize,
          ...this.searchForm,
        })
        .then((data) => {
          if (!data.code) {
            this.list = data.data.list;
            this.total = data.data.total;
          }
        })
        .finally(() => {
          this.loading = false; //请求结束后加载动画结束
        });
    },
    setStatus(row){
      this.currentRow = row;
      this.show = true
    }
  },
};
</script>
<style lang="sass" scoped>
@import '../../assets/style/list.sass'
</style>
